<template>
  <div class="user-popup column items-center">
    <q-img class="banner" src="images/default-banner.png"></q-img>
    <q-btn class="avatar" color="black" round>
      <q-avatar size="58px">
        <img src="/images/default-avatar.png" />
      </q-avatar>
    </q-btn>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.user-popup {
  width: 260px;
  height: 260px;
  background-image: linear-gradient(#090909, #000000);
  .banner {
    width: 100%;
    height: 58px;
    top: 0;
    position: relative;
  }
  .avatar {
    width: 66px;
    height: 66px;
    top: -24px;
  }
}
</style>
